<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-01-29 22:08:21
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-02-09 19:32:28
 * @FilePath: /hei_picture_web/src/page/picture/_info/InfoIndex.vue
 * @Description: 图片详情
-->
<!-- todo 样式优化 -->
<template>
  <div id="pictureDetailPage">
    <!-- 裁剪图片 -->
    <EditPicModal
      ref="imageCropperRef"
      :imageUrl="picture?.url"
      :picture="picture"
      :onSuccess="onCropSuccess"
    />
    <!-- AI 扩图 -->
    <ImageOutPaintingModal
      ref="imageOutPaintingRef"
      :picture="picture"
      :onSuccess="onOutPaintingSuccess"
    />
    <!-- 返回按钮 -->
    <a-button type="primary" @click="handleBack" style="margin-bottom: 16px"
      ><template #icon><LeftOutlined /></template>返回</a-button
    >
    <a-row :gutter="[16, 16]">
      <!-- 图片预览 -->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card
          title="图片预览"
          :bodyStyle="{
            display: 'flex',
            justifyContent: 'center',
          }"
        >
          <a-image :src="picture.url" style="max-height: 580px; object-fit: contain" />
        </a-card>
        <!-- {{ picture }} -->
      </a-col>
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
            <a-descriptions-item label="主色调">
              <a-space>
                {{ picture.picColor ?? '-' }}
                <div
                  v-if="picture.picColor"
                  :style="{
                    width: '16px',
                    height: '16px',
                    backgroundColor: toHexColor(picture.picColor),
                  }"
                />
              </a-space>
            </a-descriptions-item>
          </a-descriptions>
          <a-space wrap>
            <a-button type="primary" @click="doDownload">
              免费下载
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
            <a-button :icon="h(ShareAltOutlined)" type="primary" ghost> 分享 </a-button>
            <a-button v-if="canEdit" @click="doEdit"> 编辑 </a-button>
            <a-button v-if="canEdit" @click="doEditPicture"> 裁剪 </a-button>
            <a-button v-if="canEdit" @click="doOutPainting"> AI 扩图 </a-button>
            <a-button v-if="canDelete" type="primary" danger @click="doDelete"> 删除 </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, h, ref, computed } from 'vue'
import { getPictureVoByIdUsingGet } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { formatSize, downloadImage, toHexColor } from '@/utils'
import { ShareAltOutlined, DownloadOutlined, LeftOutlined } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { useRouter } from 'vue-router'
import { deletePictureUsingDelete } from '@/api/pictureController'
import EditPicModal from '@/components/picture/EditPicModal.vue'
import ImageOutPaintingModal from '@/components/picture/ImageOutPaintingModal.vue'
interface Props {
  id: string
}

const canEdit = ref(false)
const canDelete = ref(false)
const loginUserStore = useLoginUserStore()
const props = defineProps<Props>()
const picture = ref<API.PictureVO>({})
const router = useRouter()
const imageCropperRef = ref<InstanceType<typeof EditPicModal>>()
const imageOutPaintingRef = ref<InstanceType<typeof ImageOutPaintingModal>>()
// 获取图片详情
const fetchPictureDetail = async () => {
  try {
    const res = await getPictureVoByIdUsingGet({
      id: props.id,
    })
    if (res.data.code === 200 && res.data.data) {
      picture.value = res.data.data
    } else {
      message.error('获取图片详情失败，' + res.data.message)
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } catch (e: any) {
    message.error('获取图片详情失败：' + e.message)
  }
  checkPermission()
}

// 检查权限
const checkPermission = () => {
  canEdit.value =
    loginUserStore.loginUserInfo.userRole === 'admin' ||
    loginUserStore.loginUserInfo.userId === picture.value.user?.id
  canDelete.value =
    loginUserStore.loginUserInfo.userRole === 'admin' ||
    loginUserStore.loginUserInfo.userId === picture.value.user?.id
  return computed(() => {
    return { canEdit, canDelete }
  })
}
// 编辑图片
const doEditPicture = async () => {
  imageCropperRef.value?.openModal()
}

// AI 扩图
const doOutPainting = async () => {
  imageOutPaintingRef.value?.openModal()
}

// 下载图片
const doDownload = () => {
  downloadImage(picture.value.url, picture.value.name)
}

const doEdit = () => {
  router.push(`/picture_add?id=${props.id}`)
}

const doDelete = async () => {
  const res = await deletePictureUsingDelete({
    pictureId: props.id,
  })
  if (res.data.code === 200) {
    message.success('删除成功')
    router.back()
  } else {
    message.error('删除失败')
  }
}

const handleBack = () => {
  router.back()
}

/**
 * @description: 裁剪图片成功
 * @param {*} newPicture
 * @return {*}
 */
const onCropSuccess = (newPicture: API.PictureVO) => {
  picture.value = newPicture
}

/**
 * @description: AI 扩图成功
 * @param {*} newPicture
 * @return {*}
 */
const onOutPaintingSuccess = (newPicture: API.PictureVO) => {
  picture.value = newPicture
}

onMounted(() => {
  fetchPictureDetail()
})
</script>

<style scoped>
#pictureDetailPage {
  margin-bottom: 16px;
}
</style>
